<template>
	<view class="add-advance-page">
		<!-- 自定義導航欄 -->
		<u-navbar
			:title="pageTitle"
			:border="false"
			:auto-back="true"
			:bg-color="'#FFFFFF'"
			:title-color="'#333333'"
			:title-size="36"
			:title-weight="'bold'"
			placeholder
		>
			<template #right>
				<u-icon name="more-dot-fill" size="20" color="#333" @click="showMoreOptions"></u-icon>
				<u-icon name="search" size="20" color="#333" @click="showSearch" style="margin-left: 20rpx;"></u-icon>
			</template>
		</u-navbar>

		<!-- 表單內容 -->
		<view class="form-content">
			<!-- 事由 -->
			<view class="form-section">
				<view class="section-header">
					<text class="section-title">事由</text>
				</view>
				<u-input
					v-model="formData.reason"
					placeholder="请输入事由"
					type="textarea"
					:maxlength="100"
					:show-count="true"
					:auto-height="true"
					:border="false"
					:custom-style="{ padding: '20rpx', backgroundColor: '#FFFFFF', borderRadius: '8rpx', border: '1rpx solid #E0E0E0' }"
				/>
			</view>

			<!-- 借款明细 -->
			<view class="form-section">
				<view class="section-header">
					<text class="section-title">借款明细</text>
				</view>
				<view 
					v-for="(item, index) in formData.loanDetails" 
					:key="index"
					class="loan-detail-item"
				>
					<view class="detail-header">
						<text class="detail-number">({{ index + 1 }}) 借款明细</text>
						<view class="detail-actions">
							<text 
								class="action-btn copy-btn"
								@click="copyDetail(index)"
							>
								复制
							</text>
							<text 
								class="action-btn delete-btn"
								@click="deleteDetail(index)"
							>
								删除
							</text>
						</view>
					</view>
					
					<!-- 费用项目 -->
					<view class="form-field">
						<text class="field-label required">费用项目</text>
						<view 
							class="select-field"
							@click="selectExpenseItem(index)"
						>
							<text class="select-text">{{ item.expenseItem || '请选择' }}</text>
							<text class="select-arrow">›</text>
						</view>
					</view>
					
					<!-- 借款金额 -->
					<view class="form-field">
						<text class="field-label required">借款金额</text>
						<u-input
							v-model="item.loanAmount"
							placeholder="请输入借款金额"
							type="number"
							:maxlength="10"
							:border="false"
							:custom-style="{ padding: '20rpx', backgroundColor: '#FFFFFF', borderRadius: '8rpx', border: '1rpx solid #E0E0E0', textAlign: 'right' }"
							@input="(value) => formatLoanAmount(value, index)"
							:formatter="(value) => formatNumberInput(value)"
							:confirm-type="'done'"
							:hold-keyboard="false"
						/>
					</view>
				</view>
				
				<!-- 添加按钮 -->
				<button 
					class="add-button"
					@click="addLoanDetail"
				>
					<text class="add-icon">+</text>
					<text class="add-text">添加</text>
				</button>
			</view>

			<!-- 图片上传 -->
			<view class="form-section">
				<view class="section-header">
					<text class="section-title">图片附件</text>
				</view>
				<view class="upload-area">
					<view v-if="formData.attachments.length === 0" class="no-attachments">
						<text class="no-attachments-text">暂无附件</text>
					</view>
					<view v-else class="attachments-list">
						<view 
							v-for="(file, index) in formData.attachments" 
							:key="index"
							class="file-item"
						>
							<!-- 图片缩略图 -->
							<image 
								v-if="isImageFile(file.name)" 
								:src="getImageUrl(file)" 
								class="file-thumbnail"
								mode="aspectFill"
								@click="previewImage(file)"
							/>
							<!-- 文件图标 -->
							<view v-else class="file-icon" @click="previewFile(file)">
								<text class="icon-text">📎</text>
							</view>
							<!-- 文件信息 -->
							<view class="file-info">
								<text class="file-name">{{ file.name }}</text>
								<text class="file-size" v-if="file.fileSize">{{ formatFileSize(file.fileSize) }}</text>
							</view>
							<!-- 删除按钮 -->
							<text class="delete-file" @click.stop="deleteFile(index)">×</text>
						</view>
					</view>
					<!-- 上传按钮 -->
					<view class="upload-placeholder" @click="chooseFile">
						<text class="upload-icon">📎</text>
						<text class="upload-text">点击上传附件</text>
					</view>
				</view>
			</view>

		</view>
		
		<!-- 底部安全區域 -->
		<view class="safe-area-bottom"></view>
		
		<!-- 提交按钮 -->
		<view class="submit-button-container">
			<button class="submit-button" @click="submitForm">
				{{ submitButtonText }}
			</button>
		</view>
	</view>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, computed, watch } from 'vue'
import { onShow, onLoad } from '@dcloudio/uni-app'
import { borrowApi, uploadApi } from '@/api/api-helper.js'
import { userStore } from '@/stores/userStore'

// 表单数据
const formData = reactive({
	reason: '',
	loanDetails: [
		{
			expenseItem: '',
			expenseId: '',
			expenseNumber: '',
			loanAmount: ''
		}
	],
	attachments: []
})

// 页面参数
const pageParams = ref({
	id: ''
})

// 费用项目列表
const expenseItems = ref([])
const loadingExpenseItems = ref(false)

// 计算属性：判断是否为编辑模式
const isEditMode = computed(() => {
	return !!pageParams.value.id
})

// 计算属性：页面标题
const pageTitle = computed(() => {
	return isEditMode.value ? '编辑' : '新增'
})

// 计算属性：提交按钮文字
const submitButtonText = computed(() => {
	return isEditMode.value ? '保存' : '确定'
})

// 页面加载时获取参数
onLoad((options) => {
	console.log('=== onLoad 触发 ===')
	console.log('页面参数 options:', options)
	
	// 直接从 options 获取参数
	if (options) {
		pageParams.value.id = options.id || ''
	}
	
	console.log('页面加载完成，pageParams:', pageParams.value)
	
	// 如果是编辑模式，加载现有数据
	if (isEditMode.value) {
		loadEditData()
	}
	
	// 加载费用项目列表
	loadExpenseItems()
})

// 加载编辑数据
const loadEditData = async () => {
	if (!pageParams.value.id) return
	
	try {
		const response = await borrowApi.getBorrowDetail(pageParams.value.id)
		if (response.code === 200) {
			const data = response.data
			formData.reason = data.description || ''
			
			// 加载借款明细
			if (data.borrowItemVOList && data.borrowItemVOList.length > 0) {
				formData.loanDetails = data.borrowItemVOList.map(item => ({
					expenseItem: item.expenseName || item.expenseId || '', // 优先显示 expenseName，没有则显示 expenseId
					expenseId: item.expenseId || '', // 保持 expenseId 存储
					expenseNumber: item.expenseNumber || '',
					loanAmount: item.amount ? String(item.amount) : ''
				}))
			}
			
			// 加載附件
			if (data.attachment) {
				parseAttachmentData(data.attachment)
			}
			
			console.log('已加载编辑数据:', formData)
		} else {
			uni.showToast({
				title: response.msg || '加载数据失败',
				icon: 'none'
			})
		}
	} catch (error) {
		console.error('加载编辑数据失败:', error)
		uni.showToast({
			title: '网络错误',
			icon: 'none'
		})
	}
}

// 解析附件数据
const parseAttachmentData = (attachmentString: string) => {
	if (!attachmentString) {
		formData.attachments = []
		return
	}
	
	try {
		const attachmentData = JSON.parse(attachmentString)
		console.log('解析附件数据:', attachmentData)
		
		// 处理附件数据，支持嵌套数组格式
		let processedAttachments = []
		if (Array.isArray(attachmentData)) {
			// 如果是数组，处理可能的嵌套情况
			attachmentData.forEach(item => {
				if (Array.isArray(item)) {
					// 嵌套数组，展开
					processedAttachments.push(...item)
				} else {
					// 直接添加
					processedAttachments.push(item)
				}
			})
		} else {
			processedAttachments = [attachmentData]
		}
		
		// 过滤有效的附件数据
		formData.attachments = processedAttachments.filter(att => 
			att && att.name && (att.url || att.thumbUrl)
		)
		
		console.log('解析后的附件数据:', formData.attachments)
	} catch (e) {
		console.error('解析附件数据失败:', e)
		formData.attachments = []
	}
}

// 加载费用项目列表
const loadExpenseItems = async () => {
	loadingExpenseItems.value = true
	try {
		const response = await borrowApi.getLoadLists({
			keyword: '',
			pageSize: 100,
			currentPage: 1
		})
		if (response.code === 200) {
			expenseItems.value = response.data || []
		} else {
			console.error('获取费用项目失败:', response.msg)
		}
	} catch (error) {
		console.error('获取费用项目失败:', error)
	} finally {
		loadingExpenseItems.value = false
	}
}

// 页面显示时检查是否有数据回传
onShow(() => {
	console.log('=== onShow 触发 ===')
	// 检查是否有从filter页面回传的费用项目数据
	try {
		const expenseItemData = uni.getStorageSync('expenseItemData')
		console.log('从storage读取的数据:', expenseItemData)
		if (expenseItemData) {
			const { expenseItem, expenseId, expenseNumber, detailIndex } = expenseItemData
			console.log('解析的数据:', { expenseItem, expenseId, expenseNumber, detailIndex })
			const detailIndexNum = parseInt(detailIndex)
			console.log('转换后的索引:', detailIndexNum)
			if (detailIndexNum >= 0 && detailIndexNum < formData.loanDetails.length) {
				formData.loanDetails[detailIndexNum].expenseItem = expenseItem
				formData.loanDetails[detailIndexNum].expenseId = expenseId
				formData.loanDetails[detailIndexNum].expenseNumber = expenseNumber
				console.log('数据回显成功:', formData.loanDetails[detailIndexNum])
			}
			// 清除存储的数据，避免重复使用
			uni.removeStorageSync('expenseItemData')
			console.log('已清除storage数据')
		} else {
			console.log('storage中没有找到expenseItemData')
		}
	} catch (e) {
		console.error('读取费用项目数据失败:', e)
	}
})

// 方法
const showMoreOptions = () => {
	uni.showActionSheet({
		itemList: ['保存草稿', '预览', '设置'],
		success: (res) => {
			console.log('选择了:', res.tapIndex)
		}
	})
}

const showSearch = () => {
	uni.showToast({
		title: '搜索功能',
		icon: 'none'
	})
}



// 选择费用项目
const selectExpenseItem = (index: number) => {
	uni.navigateTo({
		url: `/pages/advance/filter?type=expense&index=${index}`
	})
}

const addLoanDetail = () => {
	formData.loanDetails.push({
		expenseItem: '',
		expenseId: '',
		expenseNumber: '',
		loanAmount: ''
	})
}

// 格式化借款金额，只允许数字和小数点
const formatLoanAmount = (value: string, index: number) => {
	// 只允许数字和小数点
	const formatted = value.replace(/[^\d.]/g, '')
	// 确保只有一个小数点
	const parts = formatted.split('.')
	if (parts.length > 2) {
		formData.loanDetails[index].loanAmount = parts[0] + '.' + parts.slice(1).join('')
	} else {
		formData.loanDetails[index].loanAmount = formatted
	}
}

// 格式化数字输入，只允许数字和小数点
const formatNumberInput = (value: string) => {
	// 只允许数字和小数点
	const formatted = value.replace(/[^\d.]/g, '')
	// 确保只有一个小数点
	const parts = formatted.split('.')
	if (parts.length > 2) {
		return parts[0] + '.' + parts.slice(1).join('')
	}
	return formatted
}

const copyDetail = (index: number) => {
	const detail = formData.loanDetails[index]
	formData.loanDetails.push({
		expenseItem: detail.expenseItem,
		expenseId: detail.expenseId,
		expenseNumber: detail.expenseNumber,
		loanAmount: detail.loanAmount
	})
	uni.showToast({
		title: '复制成功',
		icon: 'success'
	})
}

const deleteDetail = (index: number) => {
	if (formData.loanDetails.length <= 1) {
		uni.showToast({
			title: '至少保留一条借款明细',
			icon: 'none'
		})
		return
	}
	
	uni.showModal({
		title: '确认删除',
		content: '确定要删除这条借款明细吗？',
		success: (res) => {
			if (res.confirm) {
				formData.loanDetails.splice(index, 1)
				uni.showToast({
					title: '删除成功',
					icon: 'success'
				})
			}
		}
	})
}

// 判断是否为图片文件
const isImageFile = (fileName: string) => {
	if (!fileName) return false
	const imageExtensions = ['.jpg', '.jpeg', '.png', '.gif', '.bmp', '.webp']
	const lowerFileName = fileName.toLowerCase()
	return imageExtensions.some(ext => lowerFileName.endsWith(ext))
}

// 获取图片URL
const getImageUrl = (file: any) => {
	// 优先使用缩略图，如果没有则使用原图
	let imageUrl = file.thumbUrl || file.url || ''
	
	// 如果是临时文件，直接返回本地路径
	if (file.isTemp) {
		return imageUrl
	}
	
	// 如果URL是相对路径，添加基础URL前缀
	if (imageUrl && !imageUrl.startsWith('http')) {
		// 使用API基础URL
		imageUrl = 'https://hongjiang.hj-hr.com' + imageUrl
	}
	
	console.log('获取图片URL:', {
		original: file.thumbUrl || file.url,
		final: imageUrl,
		isTemp: file.isTemp
	})
	
	return imageUrl
}

// 格式化文件大小
const formatFileSize = (bytes: number) => {
	if (bytes === 0) return '0 B'
	const k = 1024
	const sizes = ['B', 'KB', 'MB', 'GB']
	const i = Math.floor(Math.log(bytes) / Math.log(k))
	return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]
}

// 预览图片
const previewImage = (file: any) => {
	if (!isImageFile(file.name)) {
		uni.showToast({
			title: '该文件不是图片，无法预览',
			icon: 'none'
		})
		return
	}
	
	const imageUrl = getImageUrl(file)
	if (!imageUrl) {
		uni.showToast({
			title: '图片地址无效',
			icon: 'none'
		})
		return
	}
	
	console.log('预览图片URL:', imageUrl)
	
	// 收集所有图片URL用于预览
	let urls = []
	formData.attachments.forEach(att => {
		if (isImageFile(att.name)) {
			const url = getImageUrl(att)
			if (url) {
				urls.push(url)
			}
		}
	})
	
	// 如果没有找到其他图片，至少包含当前图片
	if (urls.length === 0) {
		urls = [imageUrl]
	}
	
	console.log('预览图片列表:', urls)
	
	// 使用uni-app的图片预览功能
	uni.previewImage({
		current: imageUrl,
		urls: urls,
		success: () => {
			console.log('图片预览成功')
		},
		fail: (error) => {
			console.error('图片预览失败:', error)
			uni.showToast({
				title: '图片预览失败',
				icon: 'none'
			})
		}
	})
}

// 预览文件
const previewFile = (file: any) => {
	uni.showToast({
		title: '该文件类型不支持预览',
		icon: 'none'
	})
}

// 上傳附件
const chooseFile = async () => {
	uni.showActionSheet({
		itemList: ['选择图片', '拍照'],
		success: async (res) => {
			try {
				if (res.tapIndex === 0) {
					// 选择图片
					const chooseRes = await uni.chooseImage({
						count: 9,
						sizeType: ['compressed'],
						sourceType: ['album']
					})
					
					// 上傳選中的圖片
					for (let i = 0; i < chooseRes.tempFilePaths.length; i++) {
						const filePath = chooseRes.tempFilePaths[i]
						await uploadSingleFile(filePath)
					}
					
					uni.showToast({
						title: `已选择${chooseRes.tempFilePaths.length}张图片`,
						icon: 'success'
					})
				} else {
					// 拍照
					const chooseRes = await uni.chooseImage({
						count: 1,
						sizeType: ['compressed'],
						sourceType: ['camera']
					})
					
					// 上傳拍照的圖片
					for (let i = 0; i < chooseRes.tempFilePaths.length; i++) {
						const filePath = chooseRes.tempFilePaths[i]
						await uploadSingleFile(filePath)
					}
					
					uni.showToast({
						title: '拍照成功',
						icon: 'success'
					})
				}
			} catch (error) {
				console.error('选择图片失败:', error)
				uni.showToast({
					title: '选择图片失败',
					icon: 'none'
				})
			}
		}
	})
}

// 上传单个文件
const uploadSingleFile = async (filePath: string) => {
	try {
		const response = await uploadApi.uploadFile(filePath)
		if (response.code === 200) {
			// 从文件路径中提取文件名
			const fileName = filePath.split('/').pop() || `图片${formData.attachments.length + 1}`
			
			// 获取文件扩展名
			const fileExt = fileName.split('.').pop()?.toLowerCase() || ''
			
			// 构造附件对象，与编辑模式下的格式保持一致
			const attachment = {
				name: fileName,
				url: response.data?.url || filePath, // 如果没有url，使用本地路径
				thumbUrl: response.data?.thumbUrl || filePath, // 如果没有缩略图，使用原图
				fileSize: response.data?.fileSize || 0,
				fileExtension: fileExt,
				fileVersionId: response.data?.fileVersionId || null,
				uploadData: response.data, // 保存上传返回的数据，用于提交表单
				isTemp: true // 标记为临时文件，用于本地显示
			}
			
			formData.attachments.push(attachment)
			
			console.log('上传成功，附件对象:', attachment)
			console.log('当前附件列表:', formData.attachments)
		} else {
			throw new Error(response.msg || '上传失败')
		}
	} catch (error) {
		console.error('上传图片失败:', error)
		uni.showToast({
			title: '上传失败',
			icon: 'none'
		})
	}
}

// 删除附件
const deleteFile = (index: number) => {
	uni.showModal({
		title: '确认删除',
		content: '确定要删除这个附件吗？',
		success: (res) => {
			if (res.confirm) {
				formData.attachments.splice(index, 1)
				uni.showToast({
					title: '删除成功',
					icon: 'success'
				})
			}
		}
	})
}

const validateForm = () => {
	if (!formData.reason.trim()) {
		uni.showToast({
			title: '请输入事由',
			icon: 'none'
		})
		return false
	}
	
	for (let i = 0; i < formData.loanDetails.length; i++) {
		const detail = formData.loanDetails[i]
		if (!detail.expenseItem) {
			uni.showToast({
				title: `请选择第${i + 1}条的费用项目`,
				icon: 'none',
			})
			return false
		}
		if (!detail.loanAmount) {
			uni.showToast({
				title: `请输入第${i + 1}条的借款金额`,
				icon: 'none'
			})
			return false
		}
		// 验证借款金额是否为有效数字
		const amount = parseFloat(detail.loanAmount)
		if (isNaN(amount) || amount <= 0) {
			uni.showToast({
				title: `请输入第${i + 1}条的有效借款金额`,
				icon: 'none'
			})
			return false
		}
	}
	
	return true
}

// 提交表单
const submitForm = async () => {
	if (!validateForm()) {
		return
	}
	
	try {
		const openId = userStore.getOpenId()
		if (!openId) {
			uni.showToast({
				title: '请先登录',
				icon: 'none'
			})
			return
		}
		
		const submitData = {
			openId: openId,
			description: formData.reason,
			borrowItemVOList: formData.loanDetails.map(item => ({
				expenseId: item.expenseId,
				amount: parseFloat(item.loanAmount)
			}))
		}
		
		// 如果有附件，添加附件数据
		if (formData.attachments.length > 0) {
			// 构造附件数据，与编辑模式下的格式保持一致
			const attachmentData = formData.attachments.map(file => ({
				name: file.name,
				url: file.url || file.uploadData?.url || '',
				thumbUrl: file.thumbUrl || file.uploadData?.thumbUrl || '',
				fileSize: file.fileSize || file.uploadData?.fileSize || 0,
				fileExtension: file.fileExtension || file.uploadData?.fileExtension || '',
				fileVersionId: file.fileVersionId || file.uploadData?.fileVersionId || null
			}))
			
			// 使用嵌套数组格式，与编辑模式保持一致
			submitData.attachment = JSON.stringify([attachmentData])
			
			console.log('提交的附件数据:', submitData.attachment)
		}
		
		let response
		if (isEditMode.value) {
			// 编辑模式
			submitData.id = pageParams.value.id
			response = await borrowApi.updateBorrow(submitData)
		} else {
			// 新增模式
			response = await borrowApi.createBorrow(submitData)
		}
		
		if (response.code === 200) {
			const successMessage = isEditMode.value ? '保存成功' : '提交成功'
			uni.showToast({
				title: successMessage,
				icon: 'success'
			})
			
			// 延迟返回上一页
			setTimeout(() => {
				uni.navigateBack()
			}, 1000)
		} else {
			uni.showToast({
				title: response.msg || '操作失败',
				icon: 'none'
			})
		}
	} catch (error) {
		console.error('提交表单失败:', error)
		uni.showToast({
			title: '网络错误',
			icon: 'none'
		})
	}
}

onMounted(() => {
	console.log('=== onMounted 触发 ===')
	console.log('新增预支页面加载完成')
	console.log('当前formData:', formData)
	
	// 如果是编辑模式，显示附件数据
	if (isEditMode.value) {
		console.log('编辑模式，当前附件数据:', formData.attachments)
	}
	
	// 添加附件数据变化监听
	console.log('附件数据监听器已设置')
})

// 监听附件数据变化
watch(() => formData.attachments, (newAttachments) => {
	console.log('附件数据发生变化:', newAttachments)
}, { deep: true })
</script>

<style lang="scss" scoped>
.add-advance-page {
	background-color: #F5F5F5;
	min-height: 100vh;
	padding-bottom: 120rpx;
}

/* 表单内容 */
.form-content {
	padding: 20rpx;
	padding-bottom: calc(120rpx + env(safe-area-inset-bottom));
}

/* 借款明细项样式 */
.loan-detail-item {
	background-color: #FFFFFF;
	border-radius: 8rpx;
	padding: 20rpx;
	margin-bottom: 20rpx;
	border: 1rpx solid #E0E0E0;
}

.detail-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 20rpx;
	padding-bottom: 15rpx;
	border-bottom: 1rpx solid #F0F0F0;
}

.detail-number {
	font-size: 28rpx;
	font-weight: 500;
	color: #333333;
}

.form-field {
	margin-bottom: 20rpx;
}

.field-label {
	display: block;
	font-size: 28rpx;
	color: #333333;
	margin-bottom: 15rpx;
	
	&.required::before {
		content: '*';
		color: #FF4757;
		margin-right: 5rpx;
	}
}

.form-section {
	background-color: #F8F8F8;
	border-radius: 12rpx;
	padding: 20rpx;
	margin-bottom: 20rpx;
}

.section-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 20rpx;
}

.section-title {
	font-size: 32rpx;
	font-weight: bold;
	color: #333333;
}

.select-field {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20rpx;
	border: 1rpx solid #E0E0E0;
	border-radius: 8rpx;
	background-color: #FFFFFF;
	font-size: 28rpx;
	color: #333333;
}

.select-text {
	flex: 1;
}

.select-arrow {
	font-size: 28rpx;
	color: #999999;
}

.add-button {
	width: 100%;
	margin-top: -30rpx;
	background-color: #FFFFFF;
	color: var(--u-primary);
	font-size: 28rpx;
	
	border-radius: 0 0 12rpx 12rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	border: none;
	// border-top: 1rpx solid #F0F0F0;
	transition: all 0.2s ease;
	
	&:hover {
		background-color: #F8F8F8;
	}
}

.add-icon {
	font-size: 32rpx;
	margin-right: 10rpx;
}

.add-text {
	font-size: 28rpx;
}

/* 图片上传 */
.upload-area {
	padding: 20rpx;
	background-color: #FFFFFF;
	border-radius: 8rpx;
	border: 1rpx solid #E0E0E0;
}

.attachments-list {
	display: flex;
	flex-direction: column;
	gap: 15rpx;
	margin-bottom: 15rpx;
}

.file-item {
	display: flex;
	align-items: center;
	padding: 15rpx;
	background-color: #F8F8F8;
	border-radius: 8rpx;
	border: 1rpx solid #E0E0E0;
	cursor: pointer;
	transition: all 0.2s ease;
	min-height: 80rpx; /* 确保最小高度 */
	
	&:hover {
		background-color: #F0F0F0;
		border-color: var(--u-primary);
	}
}

.file-thumbnail {
	width: 60rpx;
	height: 60rpx;
	border-radius: 6rpx;
	margin-right: 15rpx;
	flex-shrink: 0;
	object-fit: cover; /* 确保图片正确填充 */
	background-color: #F0F0F0; /* 添加背景色，防止透明图片看不到 */
}

.file-icon {
	width: 60rpx;
	height: 60rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #E0E0E0;
	border-radius: 6rpx;
	margin-right: 15rpx;
	flex-shrink: 0;
}

.icon-text {
	font-size: 32rpx;
	color: #666666;
}

.file-info {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 5rpx;
	min-width: 0; /* 允许flex子项收缩 */
}

.file-name {
	font-size: 28rpx;
	color: #333333;
	font-weight: 500;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	max-width: 200rpx; /* 限制最大宽度，防止溢出 */
}

.file-size {
	font-size: 24rpx;
	color: #999999;
}

.delete-file {
	font-size: 36rpx;
	color: #FF4757;
	margin-left: 10rpx;
}

.no-attachments {
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #F0F0F0;
	border: 1rpx dashed #E0E0E0;
	border-radius: 8rpx;
	padding: 20rpx;
	font-size: 28rpx;
	color: #999999;
	margin-bottom: 15rpx;
}

.no-attachments-text {
	font-size: 28rpx;
}

.upload-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #FFFFFF;
	border: 2rpx dashed #E0E0E0;
	border-radius: 8rpx;
	padding: 20rpx;
	cursor: pointer;
	transition: all 0.2s ease;
	
	&:hover {
		background-color: #F8F8F8;
		border-color: var(--u-primary);
	}
}

.upload-icon {
	font-size: 32rpx;
	margin-right: 10rpx;
	color: #999999;
}

.upload-text {
	font-size: 28rpx;
	color: #999999;
}

/* 操作按鈕樣式 */
.detail-actions {
	display: flex;
	gap: 20rpx;
}

.action-btn {
	font-size: 26rpx;
	padding: 8rpx 12rpx;
	border-radius: 6rpx;
	cursor: pointer;
	transition: all 0.2s ease;
	
	&.copy-btn {
		color: #007AFF;
		background-color: rgba(0, 122, 255, 0.1);
		
		&:hover {
			background-color: rgba(0, 122, 255, 0.2);
		}
	}
	
	&.delete-btn {
		color: #FF4757;
		background-color: rgba(255, 71, 87, 0.1);
		
		&:hover {
			background-color: rgba(255, 71, 87, 0.2);
		}
	}
}

/* 底部安全區域和按鈕 */
.safe-area-bottom {
	height: env(safe-area-inset-bottom);
	background-color: #F5F5F5;
}

.submit-button-container {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: #FFFFFF;
	padding: 18rpx;
	padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
	border-top: 1rpx solid #F0F0F0;
	z-index: 99;
}

.submit-button {
	width: 100%;
	padding: 20rpx;
	background-color: var(--u-primary);
	color: #FFFFFF;
	font-size: 32rpx;
	font-weight: bold;
	border-radius: 8rpx;
	border: none;
}
</style>

